<!-- 财务管理 客户对账 -->
<template>
<view style="height: 100vh;">
<layout index="/pages/scm/index/index">
  <view class="carbon-container">
    <!-- 搜索表单 -->
    <view class="carbon-card search-area">
      <van-form @submit="handleQuery">
        <view class="form-grid">
          <!-- 客户选择 -->
          <view class="form-item">
            <view class="form-label">
              <van-icon name="friends-o" size="16px" color="#5e8b7c" />
              <text>客户选择</text>
            </view>
            <van-dropdown-menu active-color="#2a9d8f">
              <van-dropdown-item 
                v-model="queryParams.customerId" 
                :options="customerIdOptions"
              />
            </van-dropdown-menu>
          </view>

          <!-- 年份选择 -->
          <view class="form-item">
            <view class="form-label">
              <van-icon name="calendar-o" size="16px" color="#5e8b7c" />
              <text>统计年份</text>
            </view>
            <van-datetime-picker
              type="year"
              v-model="queryParams.contractYear"
              :formatter="formatter"
              @confirm="handleYearConfirm"
            />
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="action-buttons">
          <van-button 
            icon="search" 
            type="primary" 
            round 
            block
            color="#76c893"
          >立即查询</van-button>
          <van-button 
            plain 
            round 
            block
            color="#76c893"
            @click="resetQuery"
          >重置条件</van-button>
        </view>
      </van-form>
    </view>

    <!-- 数据展示 -->
    <view class="carbon-card data-area">
      <van-tabs 
        v-model:active="activeName"
        swipeable
        title-active-color="#2a9d8f"
        color="#a8dacc"
      >
        <!-- 季度统计 -->
        <van-tab title="季度统计">
          <view v-if="loading" class="skeleton-area">
            <van-skeleton title :row="5" />
          </view>
          <scroll-view v-else scroll-y class="data-scroll">
            <view 
              v-for="(item, index) in quarterList" 
              :key="index"
              class="data-card"
            >
              <view class="card-header">
                <van-icon name="chart-trending-o" size="20px" />
                <text class="period">{{ item.contractQuarter }}</text>
                <van-tag round type="primary">{{ item.customerName }}</van-tag>
              </view>
              <view class="card-body">
                <view class="data-item">
                  <text class="label">合同总额</text>
                  <text class="value highlight">¥{{ item.totalAmount }}</text>
                </view>
                <view class="progress-area">
                  <text class="progress-label">年度目标达成</text>
                  <van-progress 
                    :percentage="75" 
                    stroke-width="8" 
                    color="#76c893"
                    track-color="#e8f5f2"
                  />
                </view>
              </view>
            </view>
          </scroll-view>
        </van-tab>

        <!-- 月份统计 -->
        <van-tab title="月份统计">
          <view v-if="loading" class="skeleton-area">
            <van-skeleton title :row="5" />
          </view>
          <scroll-view v-else scroll-y class="data-scroll">
            <view 
              v-for="(item, index) in monthList" 
              :key="index"
              class="data-card"
            >
              <view class="card-header">
                <van-icon name="chart-trending-o" size="20px" />
                <text class="period">{{ item.contractMonth }}</text>
                <van-tag round type="primary">{{ item.customerName }}</van-tag>
              </view>
              <view class="card-body">
                <view class="data-grid">
                  <view class="data-cell">
                    <text class="label">计划金额</text>
                    <text class="value">¥15,000</text>
                  </view>
                  <view class="data-cell">
                    <text class="label">实际金额</text>
                    <text class="value highlight">¥{{ item.totalAmount }}</text>
                  </view>
                </view>
                <view class="rate-display">
                  <van-circle
                    :current-rate="85"
                    :rate="85"
                    :speed="100"
                    :stroke-width="60"
                    layer-color="#e8f5f2"
                    color="#2a9d8f"
                    :text="'达成率'"
                  />
                </view>
              </view>
            </view>
          </scroll-view>
        </van-tab>
      </van-tabs>
    </view>
  </view>
</layout>
</view>
</template>

<script setup>
import { ref, reactive } from "vue";

// 数据定义
const activeName = ref("first");
const loading = ref(true);
const showSearch = ref(true);

// 查询参数
const queryParams = reactive({
  customerId: null,
  contractYear: null,
  contractQuarter: null,
  contractMonth: null,
});

// 模拟数据
const monthList = ref([]);
const quarterList = ref([]);
const customerIdOptions = ref([
  { text: "客户A", value: "1" },
  { text: "客户B", value: "2" },
  { text: "客户C", value: "3" },
]);

// 初始化年份
const currentYear = new Date().getFullYear().toString();
queryParams.contractYear = currentYear;

// 模拟接口调用
const simulateApiCall = () => {
  setTimeout(() => {
    monthList.value = [
      { contractMonth: "2023-01", customerName: "客户A", totalAmount: "5000" },
      { contractMonth: "2023-02", customerName: "客户B", totalAmount: "7000" },
    ];
    quarterList.value = [
      { contractQuarter: "2023-Q1", customerName: "客户A", totalAmount: "15000" },
      { contractQuarter: "2023-Q2", customerName: "客户B", totalAmount: "21000" },
    ];
    loading.value = false;
  }, 1000);
};

// 搜索操作
const handleQuery = () => {
  loading.value = true;
  simulateApiCall();
};

// 重置操作
const resetQuery = () => {
  queryParams.customerId = null;
  queryParams.contractYear = currentYear;
  handleQuery();
};

// 年份选择确认
const handleYearConfirm = (value) => {
  queryParams.contractYear = value;
};

// 页面加载时初始化数据
simulateApiCall();
</script>

<style lang="scss">
.carbon-container {
  padding: 20rpx;
  background: #f8fcfb;
  min-height: 100vh;

  .carbon-card {
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 4rpx 12rpx rgba(42, 157, 143, 0.08);
    
    &.search-area {
      padding: 32rpx;
      
      .form-grid {
        display: grid;
        gap: 24rpx;
        margin-bottom: 32rpx;
        
        .form-item {
          .form-label {
            display: flex;
            align-items: center;
            margin-bottom: 16rpx;
            color: #5e8b7c;
            font-size: 26rpx;
            
            van-icon {
              margin-right: 8rpx;
            }
          }
        }
      }
      
      .action-buttons {
        display: grid;
        gap: 20rpx;
        margin-top: 24rpx;
      }
    }
    
    &.data-area {
      padding: 24rpx 0;
      
      .data-scroll {
        height: calc(100vh - 400rpx);
        padding: 0 24rpx;
        
        .data-card {
          padding: 24rpx;
          background: #fff;
          border-radius: 12rpx;
          margin-bottom: 24rpx;
          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
          
          .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 24rpx;
            
            van-icon {
              color: #76c893;
              margin-right: 12rpx;
            }
            
            .period {
              font-size: 30rpx;
              color: #2a5d52;
              margin-right: 16rpx;
              font-weight: 500;
            }
            
            van-tag {
              margin-left: auto;
            }
          }
          
          .card-body {
            .data-item {
              display: flex;
              justify-content: space-between;
              margin-bottom: 16rpx;
              
              .label {
                color: #7a9c8e;
                font-size: 26rpx;
              }
              
              .highlight {
                color: #2a9d8f;
                font-size: 32rpx;
                font-weight: 600;
              }
            }
            
            .progress-area {
              margin-top: 24rpx;
              
              .progress-label {
                display: block;
                color: #7a9c8e;
                margin-bottom: 12rpx;
              }
            }
            
            .data-grid {
              display: grid;
              grid-template-columns: 1fr 1fr;
              gap: 24rpx;
              
              .data-cell {
                background: #f5fbf8;
                border-radius: 8rpx;
                padding: 16rpx;
                
                .value {
                  color: #2a5d52;
                  font-size: 28rpx;
                  font-weight: 500;
                }
              }
            }
            
            .rate-display {
              margin-top: 32rpx;
              text-align: center;
            }
          }
        }
      }
    }
  }

  .skeleton-area {
    padding: 24rpx;
  }
}
</style>